<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div class="container-fluid welcome">
<div class="row">

<!-- <div class="col-md-12"  id="main" style="height:600px;"></div>
<div class="col-md-12"  id="main2"  style="height:600px;"></div> -->
<div class="col-md-12"  id="main3"  style="height:600px;"></div>
<!-- <div class="col-md-12"  id="main1"  style="height:600px;"></div> -->
<div class="col-md-12"  id="main4"  style="height:600px;"></div>
<!-- <div class="col-md-12"  id="main5"  style="height:600px;"></div> -->

</div>
</div>


<br/>
<!-- <div id="main1" style="width: 1600px;height:400px;"></div>
<div id="main2" style="width: 1600px;height:400px;"></div>
<br/> -->
<script type="text/javascript">
	require(["Echarts"],function(echarts){
		// 基于准备好的dom，初始化echarts实例
		/* var myChart = echarts.init(document.getElementById('main')); 
		var myChart1 = echarts.init(document.getElementById('main1'));*/
		/* var myChart2 = echarts.init(document.getElementById('main2')); */
		var myChart3 = echarts.init(document.getElementById('main3'));
		var myChart4 = echarts.init(document.getElementById('main4'));
/* 		var myChart5 = echarts.init(document.getElementById('main5')); */
		var datakey = null;
		var allName = null;
		var allValue = null;
		var dataData = new Array();
		var allValueInRate = new Array();
		var allValueOutRate = new Array();
		var items = new Array();
		
        //首页数据
        $.ajax({
            url: getServer() + "/flea/hclv/person/statisticsByProject.htmls",
            async:false,
            success: function (data) {
            	console.log(data);
            	datakey = data.data.allKey;
            	allName = data.data.allName;
            	allValue = data.data.allValue;
            	dataData = data.data.allData;
            	allValueInRate = data.data.allValueInRate;
            	allValueOutRate = data.data.allValueOutRate;
            	
            	for (var i = 0; i < dataData.length; i++) {
        			var item ={
        					name:dataData[i].showName,
        					value:dataData[i].inRate,
        			}
        			items.push(item);
        		}
            	console.log(allName);
                if (data.status != 200) {
                    return;
                }

               
            }
        });
	

		// 指定图表的配置项和数据
		var option = {
			title: {
				text: '站点人员统计'
			},
			tooltip: {},
			legend: {
				data:['站点人员数量']
			},
			xAxis: {
				data: allName
/* 				data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] */
			},
			yAxis: {},
			series: [{
				name: '站点人员数量',
				type: 'bar',
				/*  data: data */
			 data:allValue
			}]
		};
		var option1 = {
				title: {
					text: '站点人员统计'
				},
			    xAxis: {
			        type: 'category',
			        data: allName
			    },
			    yAxis: {
			        type: 'value'
			    },
			    series: [{
			        data:allValue,
			        type: 'line',
			        name:'站点人员数量',
			    }]
		};
		option2 = {
				   title : {
				        text: '站点人员数量',
				        x:'center'
				    },
			    tooltip: {
			        trigger: 'item',
			        formatter: "{a} <br/>{b}: {c} ({d}%)"
			    },
			    legend: {
			        orient: 'vertical',
			        x: 'left',
			        data:allName
			    },
			    series: [
			        {
			            name:'站点人员数量',
			            type:'pie',
			            radius: ['50%', '70%'],
			            avoidLabelOverlap: false,
			            label: {
			                normal: {
			                    show: false,
			                    position: 'center'
			                },
			                emphasis: {
			                    show: true,
			                    textStyle: {
			                        fontSize: '30',
			                        fontWeight: 'bold'
			                    }
			                }
			            },
			            labelLine: {
			                normal: {
			                    show: false
			                }
			            },
			            data:dataData
			        }
			    ]
			};
		option3 = {
			    title : {
			        text: '站点人员数量',
			        x:'center'
			    },
			    tooltip : {
			        trigger: 'item',
			        formatter: "{a} <br/>{b} : {c} ({d}%)"
			    },
			    legend: {
			        orient: 'vertical',
			        left: 'left',
			        data: allName
			    },
			    series : [
			        {
			            name: '站点人员数量',
			            type: 'pie',
			            radius : '55%',
			            center: ['50%', '60%'],
			            data: dataData,
			            itemStyle: {
			                emphasis: {
			                    shadowBlur: 10,
			                    shadowOffsetX: 0,
			                    shadowColor: 'rgba(0, 0, 0, 0.5)'
			                }
			            }
			        }
			    ]
			};

		var option4 = {
				title: {
					text: '站点人员考勤'
				},
			    xAxis: {
			        type: 'category',
			        data: allName
			    },
			    yAxis: {
			        type: 'value'
			    },
			    series: [{
			        data:allValueInRate,
			        type: 'line',
			        name:'站点人员数量',
			    }]
		};
		
		
		
	
		
		
		
		option5 = {
				   title : {
				        text: '站点人员考勤',
				        x:'center'
				    },
			    tooltip: {
			        trigger: 'item',
			        formatter: "{a} <br/>{b}: {c} ({d}%)"
			    },
			    legend: {
			        orient: 'vertical',
			        x: 'left',
			        data:allName
			    },
			    series: [
			        {
			            name:'站点人员考勤',
			            type:'pie',
			            radius: ['50%', '70%'],
			            avoidLabelOverlap: false,
			            label: {
			                normal: {
			                    show: false,
			                    position: 'center'
			                },
			                emphasis: {
			                    show: true,
			                    textStyle: {
			                        fontSize: '30',
			                        fontWeight: 'bold'
			                    }
			                }
			            },
			            labelLine: {
			                normal: {
			                    show: false
			                }
			            },
			            data:items
			        }
			    ]
			};
		// 使用刚指定的配置项和数据显示图表。
	/* 	myChart.setOption(option); */
	/* 	myChart1.setOption(option1); */
	/* 	myChart2.setOption(option2); */
		myChart3.setOption(option3);
		myChart4.setOption(option4);
		/* myChart5.setOption(option5); */
	})
</script>